<template>
  <div class="index">
    <header class="header">
      <img src="../assets/images/logo.png" />
      <h1>节能产品认证信息查询平台</h1>
    </header>
    <div class="search-filter">
      <dl>
        <dt>品目</dt>
        <dd>
          <van-cell-group>
            <van-field v-model="filter.itemsName" label="" placeholder="请选择品目" right-icon="arrow-down" input-align="right" readonly @click="filter.showItemsPicker = true"/>
          </van-cell-group>
          <van-popup v-model="filter.showItemsPicker" @opened="openPopup" round position="bottom">
            <van-picker show-toolbar item-height="1.2rem" title="选择品目" :columns="filter.itemsColumn" @cancel="filter.showItemsPicker = false" @confirm="onItemsPickerDone" ref="itemsPicker"/>
          </van-popup>
        </dd>
      </dl>
      <dl>
        <dt>生产者/制造商</dt>
        <dd>
          <van-cell-group>
            <van-field v-model="filter.manuName" label="" placeholder="支持模糊查询" maxlength="200" input-align="right"/>
          </van-cell-group>
        </dd>
      </dl>
      <dl>
        <dt>品牌</dt>
        <dd>
          <van-cell-group>
            <van-field v-model="filter.brand" label="" placeholder="支持模糊查询" maxlength="50" input-align="right"/>
          </van-cell-group>
        </dd>
      </dl>
      <dl>
        <dt>证书编号</dt>
        <dd>
          <van-cell-group>
            <van-field v-model="filter.certNo" label="" placeholder="请输入证书编号" maxlength="50" input-align="right"/>
          </van-cell-group>
        </dd>
      </dl>
      <dl>
        <dt>规格型号</dt>
        <dd>
          <van-cell-group>
            <van-field v-model="filter.proType" label="" placeholder="支持模糊查询" maxlength="200" input-align="right"/>
          </van-cell-group>
        </dd>
      </dl>
      <dl>
        <dt>证书到期日期</dt>
        <dd>
          <van-cell-group>
            <van-field v-model="filter.certEdateStart" label="" placeholder="请选择起始日期" input-align="right" left-icon="calendar-o" readonly @click-input="dateRange.start = true">
              <template #button>
                <van-button size="mini" v-if="filter.certEdateStart" @click="filter.certEdateStart=''; dateRange.startDate=new Date();" type="default"><van-icon name="clear" /></van-button>
              </template>
            </van-field>
            <van-popup v-model="dateRange.start" round position="bottom">
              <van-datetime-picker v-model="dateRange.startDate" type="date" color="#1f53b1" title="选择起始日期" :min-date="dateRange.minDate" :max-date="dateRange.maxDate" @cancel="dateRange.start=false" @confirm="onDateStartDone"/>
            </van-popup>
            <van-field v-model="filter.certEdateEnd" label="" placeholder="请选择终止日期" input-align="right" left-icon="calendar-o" readonly @click-input="dateRange.end = true">
              <template #button>
                <van-button size="mini" v-if="filter.certEdateEnd" @click="filter.certEdateEnd=''; dateRange.endDate=new Date();" type="default"><van-icon name="clear" /></van-button>
              </template>
            </van-field>
            <van-popup v-model="dateRange.end" round position="bottom">
              <van-datetime-picker v-model="dateRange.endDate" type="date" color="#1f53b1" title="选择终止日期" :min-date="dateRange.minDate" :max-date="dateRange.maxDate" @cancel="dateRange.end=false" @confirm="onDateEndDone"/>
            </van-popup>
          </van-cell-group>
        </dd>
      </dl>
    </div>
    <footer class="search-filter-footer">
      <van-button round type="info" size="normal" block icon="search" color="#1f53b1" @click="doSearch">查询</van-button>
    </footer>
  </div>
</template>
<script>
  import cateGoryData from '../assets/js/category.data'
  import { Toast } from 'vant'
  export default {
    name: "index",
    data () {
      let now = new Date();
      let params = window.$searchParams || {};
      let xmlb = {};
      cateGoryData.map(c => {
        xmlb[c.values] = c.text;
      })
      return {
        filter: {
          items: params.items || '',
          itemsName: params.itemsName || '',
          itemsIndex: params.itemsIndex || [],
          xmlb: params.xmlb || '',
          certNo: params.certNo || '',
          brand: params.brand || '',
          manuName: params.manuName || '',
          proType: params.proType || '',
          certEdateStart: params.certEdateStart || '',
          certEdateEnd: params.certEdateEnd || '',
          dateRange: {
            start: false,
            end: false
          },
          showItemsPicker: false,
          itemsColumn: cateGoryData
        },
        xmlb: xmlb,
        dateRange: {
          start: false,
          startDate: params.certEdateStart ? new Date(params.certEdateStart.split('-')[0], params.certEdateStart.split('-')[1], params.certEdateStart.split('-')[2], 0, 0, 0) : new Date(),
          end: false,
          endDate: params.certEdateEnd ? new Date(params.certEdateEnd.split('-')[0], params.certEdateEnd.split('-')[1], params.certEdateEnd.split('-')[2], 0, 0, 0) : new Date(),
          minDate: now,
          maxDate: new Date(now.getFullYear()+10, now.getMonth(), now.getDate())
        }
      }
    },
    methods: {
      doInputTextFilter: function (key) {
        var self = this, f = self.filter;
        if (key === 'proType') {
          return f[key].replace(/\^|\%|\￥|\<|\>|\《|\》/g, '');
        } else {
          return f[key].replace(/\*|\^|\%|\&|\￥|\#|\@|\<|\>|\《|\》/g, '');
        }
      },
      doSearch () {
        let self = this;
        let filter = self.filter
        if ((filter.items && filter.items !== '0') || (filter.xmlb && filter.xmlb !== '0') || self.doInputTextFilter('certNo') || self.doInputTextFilter('brand') || self.doInputTextFilter('manuName') || self.doInputTextFilter('proType') || filter.certEdateStart || filter.certEdateEnd) {
          var _filter = {
            items: filter.items,
            itemsName: filter.itemsName,
            itemsIndex: filter.itemsIndex,
            xmlb: filter.xmlb,
            xmlbName: self.xmlb[filter.xmlb],
            certNo: self.doInputTextFilter('certNo'),
            brand: self.doInputTextFilter('brand'),
            manuName: self.doInputTextFilter('manuName'),
            proType: self.doInputTextFilter('proType'),
            certEdateStart: filter.certEdateStart,
            certEdateEnd: filter.certEdateEnd,
            startIndex: 1,
            endIndex: 150,
            buttonName: 'queryBtnMOBILE'
          }
          window.$searchParams = _filter;
          self.$router.push('/result');
        } else {
          Toast({
            message: '请至少输入一个查询条件，查询条件不得包含特殊字符！',
            position: 'bottom',
          });
        }
      },
      onItemsPickerDone (picker) {
        let $itemPicker = this.$refs.itemsPicker;
        this.filter.itemsName = picker.join('') === '不限不限' ? '不限' : picker.join('，');
        picker = $itemPicker.getValues();
        this.filter.itemsIndex = $itemPicker.getIndexes();
        if(picker.length === 2) {
          this.filter.xmlb = picker[0].values;
          this.filter.items = picker[1].values;
        }
        this.filter.showItemsPicker = false;
      },
      onDateEndDone: function (date) {
        let self = this;
        if (!!self.filter.certEdateStart) {
          var _end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime(),
            s = self.filter.certEdateStart.split('-'),
            _start = new Date(s[0], parseInt(s[1]) - 1, s[2], 0, 0, 0).getTime();
          if (_end < _start) {
            Toast({
              message: '结束时间不得小于开始时间',
              position: 'bottom'
            })
          } else {
            self.filter.certEdateEnd = self.formatDate(date);
            self.dateRange.end = false;
          }
        } else {
          self.filter.certEdateEnd = self.formatDate(date);
          self.dateRange.end = false;
        }
      },
      onDateStartDone: function (date) {
        let self = this;
        if (!!self.filter.certEdateEnd) {
          var _start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime(),
            s = self.filter.certEdateEnd.split('-'),
            _end = new Date(s[0], parseInt(s[1]) - 1, s[2], 0, 0, 0).getTime();
          if (_end < _start) {
            Toast({
              message: '开始时间不得大于结束时间',
              position: 'bottom'
            })
          } else {
            self.filter.certEdateStart = self.formatDate(date);
            self.dateRange.start = false;
          }
        } else {
          self.filter.certEdateStart = self.formatDate(date);
          self.dateRange.start = false;
        }
      },
      formatDate (date) {
        let m = (date.getMonth() + 1);
        m = m < 10 ? '0' + m : m;
        let d = (date.getDate());
        d = d < 10 ? '0' + d : d;
        return [date.getFullYear(), m, d].join('-');
      },
      initItems: function () {
        let self = this;
      },
      openPopup () {
        if (typeof this.$refs.itemsPicker === 'object') {
          if (this.filter.itemsIndex.length >= 2) {
            this.$refs.itemsPicker.setIndexes(this.filter.itemsIndex);
          }
        }
      }
    }
  }
</script>
